// const misha_loadmore_params = null;

let screen = null;

const mq_s = window.matchMedia( '(max-width: 40em)' );
const mq_ns = window.matchMedia( '(min-width: 40em) and (max-width: 64em)' );
const mq_l = window.matchMedia( '(min-width: 64em)' );

if ( mq_s.matches ) {
	screen = 'small';
} else if ( mq_ns.matches ) {
	screen = 'medium';
} else if ( mq_l.matches ) {
	screen = 'large';
}

console.log( 'load', screen );

function isSmall( e ) {
	( e.matches ) ? screen = 'small' : screen = screen;
	console.log( screen );
}

function isMedium( e ) {
	( e.matches ) ? screen = 'medium' : screen = screen;
	console.log( screen );
}

function isLarge( e ) {
	( e.matches ) ? screen = 'large' : screen = screen;
	console.log( screen );
}

mq_s.addListener( isSmall );
mq_ns.addListener( isMedium );
mq_l.addListener( isLarge );

function infiniteScroll() {

	let canBeLoaded = true;
	const bottomOffset = 2000;
	let postType = document.querySelector( '[data-post-type]' );
	if ( postType ) {
		postType = postType.getAttribute( 'data-post-type' );
	}

	window.addEventListener( 'scroll', () => {

		const hasContentFilters = document.querySelector( '[data-content-filter]' );

		if ( jQuery( document ).scrollTop() > ( jQuery( document ).height() - bottomOffset ) && canBeLoaded === true && hasContentFilters ) {

			let filter = null;

			if ( screen === 'small' ) {
				filter = jQuery( '#filter-mobile' );
			} else {
				filter = jQuery( '#filter' );
			}

			const data = {
				'action': 'loadmore',
				'query': misha_loadmore_params.posts,
				'page': misha_loadmore_params.current_page,
				'filter': filter.serialize(),
				'postType': postType
			};

			const spinner = document.createElement( 'div' );
			spinner.id = 'loading-spinner';
			spinner.classList.add( 'loading-spinner', 'mw4', 'center', 'ph3' );
			spinner.innerHTML = '<svg width="200" height="200" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="dynamic-loading-spinner"> <stop stop-color="#6ab945" stop-opacity="0" offset="0%"/> <stop stop-color="#6ab945" stop-opacity=".631" offset="63.146%"/> <stop stop-color="#6ab945" offset="100%"/> </linearGradient> </defs> <g fill="none" fill-rule="evenodd"> <g transform="translate(1 1)"> <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#dynamic-loading-spinner)" stroke-width="2"> <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /> </path> <circle fill="#fff" cx="36" cy="18" r="1"> <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" /> </circle> </g> </g> </svg>';

			const lastArticle = document.querySelector( 'article:last-of-type' );
			if ( lastArticle ) {
				document.querySelector( 'article:last-of-type' ).after( spinner );
			}

			jQuery.ajax( {
				url : misha_loadmore_params.ajaxurl,
				data,
				type: 'POST',
				beforeSend() {
					// you can also add your own preloader here
					// you see, the AJAX call is in process, we shouldn't run it again until complete
					canBeLoaded = false;
				},
				success( data ) {
					if ( data ) {
						jQuery( '#main' ).find( 'article:last-of-type' ).after( data ); // where to insert posts
						canBeLoaded = true; // the ajax is completed, now we can run it again
						misha_loadmore_params.current_page++;
						refreshModals();
					}
					if ( spinner.parentNode ) {
						spinner.parentNode.removeChild( spinner );
					}
					// canBeLoaded = true;
				}
			} );
		}
	} );
}

infiniteScroll();